Uurige, kuidas CSS-i kerimisankurdamine hoiab ära sisu hüpped, parandades dünaamiliste veebisaitide kasutajakogemust. Avastage parimad tavad ja praktilised näited sujuvaks navigeerimiseks.
CSS-i kerimisankurdamine: sisu hüpete vältimine sujuvama kasutajakogemuse tagamiseks
Kas olete kunagi veebis artiklit lugenud, kui leht äkki hüppab, kaotades oma koha ja sundides teid tagasi alla kerima? See frustreeriv kogemus, mida tuntakse kui "sisu hüpet", ilmneb sageli siis, kui dünaamiline sisu laaditakse praegusest vaatealast kõrgemale, surudes olemasolevat sisu allapoole. CSS-i kerimisankurdamine on võimas vahend selle probleemi vastu võitlemiseks, suurendades oluliselt kasutajakogemust, säilitades kasutaja kerimisasendi isegi siis, kui sisu muutub.
Sisu hüpete ja nende mõju mõistmine
Sisu hüpped on tavaliselt põhjustatud ressursside, nagu pildid, reklaamid või dünaamiliselt genereeritud sisu asünkroonsest laadimisest. Kuigi need elemendid suurendavad veebisaidi funktsionaalsust ja visuaalset atraktiivsust, võib nende hilinenud laadimine häirida kasutaja lugemisvoogu. Äkiline paigutuse muutus on mitte ainult ärritav, vaid võib ka vähendada kaasatust ja potentsiaalselt suunata kasutajaid teie veebisaidilt eemale.
Kujutage ette, et loete uudisteartiklit koos manustatud reklaamidega. Kui te alla kerite, laaditakse reklaam teie praegusest asukohast kõrgemale, surudes teie loetud teksti edasi lehe allapoole. Peate peatuma, end uuesti orienteeruma ja oma koht uuesti leidma. See katkestus kahjustab lugemiskogemust ja võib olla uskumatult frustreeriv, eriti väiksema ekraaniga mobiilseadmetes.
Miks see on probleem?
- Kehv kasutajakogemus: Frustratsioon ja desorientatsioon viivad veebisaidi negatiivse tajumiseni.
- Vähenenud kaasatus: Kasutajad lahkuvad suurema tõenäosusega veebisaidilt, kui nende kogemust katkestatakse pidevalt.
- Saadavusprobleemid: Sisu hüpped võivad olla eriti problemaatilised puudega kasutajate jaoks, näiteks need, kes kasutavad ekraanilugejaid või tuginevad stabiilsele visuaalsele paigutusele.
- Potentsiaalne SEO mõju: Kuigi kaudne, võib kehv kasutajakogemus kaasa aidata madalamatele kaasatusmõõdikutele, mis võib aja jooksul mõjutada otsingumootorite järjestust.
CSS-i kerimisankurdamise tutvustus
CSS-i kerimisankurdamine on brauseri funktsioon, mis on loodud kerimisasendi automaatseks kohandamiseks, kui sisu muutub dünaamiliselt. See põhimõtteliselt "ankurdab" kasutaja praeguse kerimisasendi lehel teatud elemendile, tagades, et vaateala jääb sellele elemendile keskendunuks isegi siis, kui sisu lisatakse või eemaldatakse selle kohal. See hoiab ära dünaamilisi veebisaite vaevavad ärritavad hüpped ja nihked.
Kerimisankurdamise taga olev põhimehhanism on üllatavalt lihtne. Kui see on lubatud, jälgib brauser dokumendi paigutuse muutusi. Kui see tuvastab muudatuse, mis tavaliselt nihutaks kerimisasendit, kohandab see automaatselt kerimisnihet, et kompenseerida, hoides kasutaja vaateala samal sisul keskendununa.
Kuidas CSS-i kerimisankurdamist rakendada
Peamine CSS-i omadus, mis kontrollib kerimisankurdamist, on overflow-anchor. Seda omadust saab rakendada mis tahes keritavale elemendile, sealhulgas <body> elemendile endale. Siin on, kuidas saate seda kasutada:
Kerimisankurdamise lubamine kogu lehel
Kerimisankurdamise lubamiseks kogu veebilehel saate rakendada omaduse overflow-anchor elemendile <body>:
body {
overflow-anchor: auto;
}
See on kõige lihtsam ja sageli kõige tõhusam viis kerimisankurdamise rakendamiseks. Väärtus auto ütleb brauserile, et see haldab kerimisankurdamist automaatselt kogu dokumendis.
Kerimisankurdamise keelamine konkreetsete elementide jaoks
Mõnel juhul võiksite kerimisankurdamise keelata konkreetsete elementide jaoks oma lehel. Näiteks võib teil olla komponent, mis sõltub konkreetsest kerimiskäitumisest, mis ei ühildu kerimisankurdamisega. Kerimisankurdamise keelamiseks konkreetse elemendi jaoks seadke omadus overflow-anchor väärtusele none:
.no-scroll-anchor {
overflow-anchor: none;
}
Seejärel rakendage klass .no-scroll-anchor elemendile, mille soovite kerimisankurdamisest välja jätta.
Praktilised näited ja kasutusjuhud
Uurime mõningaid praktilisi näiteid selle kohta, kuidas kerimisankurdamist saab kasutada kasutajakogemuse parandamiseks erinevat tüüpi veebisaitidel:
1. Blogid ja uudisteartiklid
Nagu varem mainitud, on blogid ja uudisteartiklid kerimisankurdamise peamised kandidaadid. Kerimisankurdamise lubamisega saate vältida tüütuid sisu hüppeid, mis ilmnevad piltide või reklaamide asünkroonsel laadimisel. See tagab sujuvama ja nauditavama lugemiskogemuse teie kasutajatele.
Näide: Mõelge blogipostitusele koos manustatud piltidega. Ilma kerimisankurdamiseta hüppab tekst, kui pildid laaditakse, häirides lugeja voogu. Kerimisankurdamise lubamisega kohandab brauser automaatselt kerimisasendit, hoides teksti stabiilsena ja vältides hüpet.
2. Sotsiaalmeedia voogud
Sotsiaalmeedia voogud laadivad sageli uut sisu dünaamiliselt, kui kasutaja alla kerib. Ilma kerimisankurdamiseta võib see viia sisu hüpeteni ja frustreeriva kasutajakogemuseni. Kerimisankurdamise lubamisega saate tagada, et kasutaja kerimisasend säiliks uute postituste laadimisel, luues sujuva ja katkestusteta sirvimiskogemuse.
Näide: Kujutage ette, et kerite oma sotsiaalmeedia voos. Kui jõuate lehe lõppu, laaditakse uued postitused automaatselt. Ilma kerimisankurdamiseta võivad need uued postitused suruda teie vaadatud sisu edasi lehe allapoole. Kerimisankurdamisega kohandab brauser kerimisasendit, et hoida teie vaadatud sisu vaatealas.
3. E-kaubanduse tootenimekirjad
E-kaubanduse veebisaidid kasutavad sageli dünaamilist filtreerimist ja sorteerimist tootenimekirjade kuvamiseks. Kui filtreid rakendatakse või sorteerimisjärjestust muudetakse, uuendatakse lehel olevat sisu dünaamiliselt. Ilma kerimisankurdamiseta võib see viia sisu hüpeteni ja segadusse ajavale kasutajakogemusele. Kerimisankurdamise lubamisega saate tagada, et kasutaja kerimisasend säiliks tootenimekirjade uuendamisel, hõlbustades nende sirvimist ja otsitavate toodete leidmist.
Näide: Oletame, et sirvite veebipoodi ja rakendate filtreid oma otsingu kitsendamiseks konkreetse toote jaoks. Iga kord, kui rakendate filtrit, uuendatakse tootenimekirju. Ilma kerimisankurdamiseta võib leht hüpata tagasi üles, sundides teid uuesti alla kerima. Kerimisankurdamisega jääb leht umbes samasse asukohta, võimaldades teil katkestusteta sirvida.
4. ĂśhelehekĂĽljelised rakendused (SPA-d)
Üheleheküljelised rakendused (SPA-d) tuginevad suuresti dünaamilisele sisu laadimisele. Kui kasutajad rakenduses navigeerivad, laaditakse uus sisu asünkroonselt, sageli asendades olemasoleva sisu. Ilma kerimisankurdamiseta võib see viia sagedaste sisu hüpeteni ja ärritava kasutajakogemuseni. Kerimisankurdamise lubamisega saate tagada, et kasutaja kerimisasend säiliks sisu muutumisel, luues sujuvama ja reageerivama rakenduse.
Näide: Kujutage ette SPA-d, millel on mitu jaotist, mis laaditakse dünaamiliselt, kui kasutaja klõpsab navigeerimislinkidel. Ilma kerimisankurdamiseta võib iga kord, kui uus jaotis laaditakse, leht hüpata tagasi üles. Kerimisankurdamisega säilitab leht kasutaja kerimisasendi praeguses jaotises, luues sujuvama ülemineku jaotiste vahel.
Parimad tavad CSS-i kerimisankurdamise kasutamisel
Kuigi CSS-i kerimisankurdamine on võimas vahend, on oluline seda tõhusalt kasutada, et vältida soovimatuid tagajärgi. Siin on mõned parimad tavad, mida meeles pidada:
- Kasutage seda mõistlikult: Kuigi kerimisankurdamise lubamine kogu lehel on sageli hea algus, kaaluge selle keelamist konkreetsete elementide puhul, mis võivad negatiivselt mõjutada.
- Testige põhjalikult: Testige alati oma veebisaiti või rakendust põhjalikult pärast kerimisankurdamise rakendamist, et veenduda, et see töötab ootuspäraselt ja et see ei põhjusta ootamatut käitumist.
- Kaaluge jõudlust: Kuigi kerimisankurdamise mõju jõudlusele on üldiselt minimaalne, on oluline teada, et see lisab brauseri paigutusarvutustele väikese lisakoormuse. Kui töötate kõrgelt optimeeritud rakendusega, võiksite oma koodi profiilida, et veenduda, et kerimisankurdamine ei põhjusta jõudluse kitsaskohti.
- Käsitsege äärejuhtumeid: Olge teadlik potentsiaalsetest äärejuhtumitest, kus kerimisankurdamine ei pruugi ootuspäraselt töötada. Näiteks kui sisu muutused on väga kiired või kui paigutus on äärmiselt keeruline, ei pruugi brauser suuta kerimisasendit täpselt kohandada.
- Kombineerige teiste tehnikatega: Kerimisankurdamine on vaid üks vahend teie arsenalis kasutajakogemuse parandamiseks. Kaaluge selle kombineerimist teiste tehnikatega, nagu piltide laisk laadimine ja sisu edastuse optimeerimine, et luua tõeliselt sujuv ja nauditav sirvimiskogemus.
Brauseri ĂĽhilduvus
CSS-i kerimisankurdamist toetavad laialdaselt kaasaegsed brauserid. Siiski on alati hea mõte kontrollida ühilduvustabelit saidil Can I use, et veenduda, et teie kasutajad tõenäoliselt kasutatavad brauserid seda toetavad.
2024. aasta oktoobri seisuga toetavad kerimisankurdamist:
- Chrome (versioon 64 ja uuemad)
- Firefox (versioon 68 ja uuemad)
- Safari (versioon 14.1 ja uuemad)
- Edge (versioon 79 ja uuemad)
- Opera (versioon 51 ja uuemad)
Vanemate brauserite puhul, mis ei toeta kerimisankurdamist, on käitumine lihtsalt puudulik – sisu hüpped ilmnevad endiselt. Nendel juhtudel võite kaaluda JavaScript-põhiste polüfilide kasutamist sarnase funktsionaalsuse pakkumiseks. Olge aga teadlik, et need polüfilid võivad olla keerulisemad ja potentsiaalselt vähem jõudlusega kui natiivne brauseri rakendamine.
Alternatiivid ja varuvõimalused
Kuigi CSS-i kerimisankurdamine on eelistatud lahendus sisu hüpete vältimiseks, on alternatiivseid lähenemisviise, mida saate kasutada, eriti vanemate brauserite puhul või olukordades, kus kerimisankurdamisest ei piisa.
JavaScript-põhised lahendused
Võite kasutada JavaScripti kerimisasendi käsitsi kohandamiseks, kui sisu muutub. See lähenemine nõuab rohkem koodi ja võib olla keerulisem kui CSS-i kerimisankurdamise kasutamine, kuid see pakub suuremat kontrolli kerimiskäitumise üle. Siin on põhinäide:
// Hankige praegune kerimisasend
const scrollPosition = window.pageYOffset;
// Laadige uus sisu
// ...
// Taastage kerimisasend
window.scrollTo(0, scrollPosition);
See koodijupp jäädvustab praeguse kerimisasendi enne uue sisu laadimist ja taastab selle pärast sisu laadimist. See takistab lehte tagasi üles hüppamast.
Kohtelemendid
Teine lähenemisviis on kasutada kohtelemente, et reserveerida ruumi dünaamiliselt laaditavale sisule. See takistab olemasoleva sisu nihkumist, kui uus sisu sisestatakse. Näiteks saate kasutada elementi <div> fikseeritud kõrguse ja laiusega pildi jaoks, mis laaditakse hiljem.
<div style="width: 300px; height: 200px;">
<img src="placeholder.gif" data-src="actual-image.jpg" alt="Image">
</div>
Selles näites reserveerib element <div> ruumi pildile, takistades selle all oleva sisu nihkumist, kui pilt laaditakse. Saate kasutada JavaScripti, et asendada kohtpildi tegeliku pildiga pärast selle laadimist.
Kerimisankurdamise ja paigutuse stabiilsuse tulevik
CSS-i kerimisankurdamine on osa laiemast jõupingutusest paigutuse stabiilsuse parandamiseks veebis. Kumulatiivne paigutuse nihe (CLS) mõõdik, mis on Google'i Core Web Vitalsi põhikoostisosa, mõõdab ootamatute paigutuse nihete hulka, mis lehel ilmnevad. Madal CLS-i skoor on oluline hea kasutajakogemuse pakkumiseks ja otsingumootori järjestuse parandamiseks.
Kasutades CSS-i kerimisankurdamist ja muid tehnikaid sisu hüpete vältimiseks, saate oluliselt vähendada oma veebisaidi CLS-i skoori ja parandada selle üldist kasutajakogemust. Kuna brauserid arenevad edasi ja rakendavad uusi funktsioone paigutuse stabiilsuse tagamiseks, on oluline olla kursis uusimate parimate tavade ja tehnikatega.
Kokkuvõte
CSS-i kerimisankurdamine on väärtuslik vahend sisu hüpete vältimiseks ja sujuvama kasutajakogemuse loomiseks dünaamilistel veebisaitidel. Kerimisankurdamise lubamisega saate tagada, et teie kasutajad saavad teie veebisaiti sirvida ja sellega suhelda, ilma et neid häiriksid ärritavad paigutusnihe. See mitte ainult ei paranda kasutajate rahulolu, vaid võib kaasa tuua ka suurema kaasatuse ja potentsiaalselt paremad otsingumootorite järjestused.
Olenemata sellest, kas ehitate blogi, sotsiaalmeedia platvormi, e-kaubanduse veebisaidi või üheleheküljelise rakenduse, kaaluge CSS-i kerimisankurdamise rakendamist, et parandada kasutajakogemust ja luua poleeritud ja professionaalsem veebisait. Pidage meeles, et testige oma rakendust põhjalikult ja kombineerige seda teiste tehnikatega parimate võimalike tulemuste saavutamiseks. Võtke omaks CSS-i kerimisankurdamise jõud ja jätke hüvasti frustreerivate sisu hüpetega!